<!--
 * @Author:
 * @Date: 2022-06-29 17:20:07
 * @LastEditors:
 * @LastEditTime: 2022-07-16 17:44:24
 * @FilePath: \imechos-admin\src\views\homepageTABManagement\customTag.vue
 * @Description:
 *
 * Copyright (c) 2022 by  , All Rights Reserved.
-->
<template>
  <div class="app-container">
    <div class="flex flex-wrap marginRB10">
        <div class="flex items-center ml-4">
            <span class="w-24">用户ID：</span>
            <el-input v-model="listQuery.user_id" clearable placeholder="请输入用户ID" style="width:200px;"></el-input>
        </div>
        <div class="flex items-center ml-4">
            <span class="w-24">用户昵称：</span>
            <el-input v-model="listQuery.nickname" clearable placeholder="请输入用户昵称" style="width:200px;"></el-input>
        </div>
        <div class="flex-1 flex justify-end items-start ml-4">
          <el-button icon="el-icon-search" type="primary" @click="userLabelList">搜索</el-button>
          <el-button @click="resetSubmit">重置</el-button>
        </div>
    </div>
    <el-table
      ref="dataList"
      :data="tableData"
      border
      row-key="id"
      style="margin-bottom: 20px"
    >
      <el-table-column label="用户头像" prop="head_picture">
        <template slot-scope="scope">
          <el-image :src="scope.row.head_picture" class="w-20" fit="fill" :lazy="true"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" prop="nickname"></el-table-column>
      <el-table-column label="用户ID" prop="user_code"></el-table-column>
      <el-table-column label="标签名称" prop="label_name"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="default" style="color: #f56c6c;" type="text"
                     @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="userLabelList"
    />

    <!-- 删除标签弹框 -->
    <el-dialog
        title="删除标签"
        :visible.sync="deleteDialogVisible"
        width="435px"
        >
        <span style="">是否确认删除标签？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDeleteLabel">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  userLabelList, //自定义标签列表
  userLabelDelete //删除自定义标签
} from '@/api/homepageTABManagement/customTag'
export default {
    name: 'customTag',
    data() {
        return {
          deleteDialogVisible: false,
          tableData: [],
          total: 0,
          listQuery: {
            perPage: 10,
            page: 1
          },
          label_id: ''
        }
    },
    mounted() {
      this.userLabelList()
    },
    methods: {
      userLabelList() {
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === "" ? undefined : this.listQuery[key];
        }
        userLabelList(this.listQuery).then(res => {
          if(res.code === 200) {
            this.tableData = res.data.list
            this.total = res.data.meta.total
          }
        })
      },
      handleDelete(row) {
        this.label_id = row.id
        this.deleteDialogVisible = true
      },
      confirmDeleteLabel() {
        userLabelDelete(this.label_id).then(res => {
          if(res.code === 200) {
            this.$message({
                type: 'success',
                message: '操作成功'
            })
            this.deleteDialogVisible = false
            this.userLabelList()
          }else{
              this.$message({
                  type: 'error',
                  message: '操作失败，稍后重试'
              })
          }
          })
      },
      resetSubmit() {
        this.listQuery = {
            page: 1,
            perPage: 10
        }
        this.userLabelList()
      }
    },
}
</script>

<style>

</style>
